<template>
    <view class="wrap" v-if="data">
        <template v-if="is_fugou">
            <view class="fugou-wrap">
                <view class="fugou-top">
                    <view class="fugou-top-top">
                        <view class="fugou-top-title">冻结金额(元)</view>
                        <view class="fugou-top-title-right" @click="goToLog">
                            冻结明细
                            <text class="iconfont icon-arrow-right"></text>
                        </view>
                    </view>
                    <view class="fugou-top-price">
                        {{ data.frost_price }}
                    </view>
                </view>
                <view class="fugou-list-bg">
                    <view class="fugou-list-top">
                        <image :src="asyncImgs.fugou.gouwuche"></image>
                        <text>复购商品</text>
                         · 购买成功解锁冻结佣金～
                    </view>
                    <view class="fugou-list">
                        <view class="fugou-item" :class="{on: item.checked == 1}" v-for="(item, index) of data.setting.fugou_goods" :key="index">
                            <view class="fugou-item-check" @click="onCheck(index)">
                                <text class="iconfont icon-success-fill" v-if="item.checked == 1"></text>
                                <text class="iconfont icon-xuanzekuangmoren" v-else></text>
                            </view>
                            <view class="fugou-item-goods">
                                <view class="fugou-item-goods-img">
                                    <image :src="item.cover_pic"></image>
                                </view>
                                <view class="fugou-item-goods-info">
                                    <view class="fugou-item-goods-title">
                                        {{ item.name }}
                                    </view>
                                    <view class="fugou-item-goods-price">
                                        <view class="fugou-item-goods-price-1">
                                            <text>￥</text>{{ item.fugou_price }}
                                        </view>
                                        <view class="fugou-item-goods-price-2">
                                            ￥{{ item.original_price }}
                                        </view>
                                    </view>
                                    <view class="fugou-item-goods-footer">
                                        <view class="fugou-item-goods-footer-left">
                                            库存 {{ item.goods_num }}
                                        </view>
                                        <view>
                                            <numberStep @change="onNumChange(index)" v-model="item.fugou_num" :min="1"></numberStep>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="fugou-z"></view>
            </view>
            <view class="fugou-footer-wrap">
                <view class="fugou-footer">
                    <view class="fugou-footer-left">
                        <view class="fugou-footer-left-price">
                            订单小计:
                            <view class="fugou-footer-left-price-1">
                                <text>￥</text>{{ total_price }}
                            </view>
                        </view>
                        <view class="fugou-footer-left-bottom">
                            <view>复购件数: <text>{{ data.setting.fugou_where_num }}件</text></view>
                            <view>复购金额: <text>¥{{ data.setting.fugou_where_price }}元</text></view>
                        </view>
                    </view>
                    <view class="fugou-footer-right">
                        <view class="fugou-submit" @click="onBuy" :class="{on: isBuy}">{{ isBuy ? '立即结算' : '复购未达标' }}</view>
                    </view>
                </view>
                <view class="fugou-footer-z"></view>
            </view>
        </template>
        <template v-else>
            <view class="fugou-wu">
                <view class="fugou-wu-img">
                    <text class="iconfont icon-clock-fill"></text>
                </view>
                <view class="fugou-wu-title">无需复购</view>
                <template v-if="data.setting.fugou_type == 1 && data.cycle_day > 0">
                    <view class="fugou-wu-sub-title">预计{{ data.cycle_day }}天后需要复购</view>
                </template>
                <template v-if="data.setting.fugou_type == 2 && data.cycle_price > 0">
                    <view class="fugou-wu-sub-title">预计再获得{{ data.cycle_price }}佣金需要复购</view>
                </template>
                <template v-if="data.setting.fugou_type == 3">
                    <view class="fugou-wu-sub-title" v-if="data.cycle_day > 0">预计{{ data.cycle_day }}天后需要复购</view>
                    <view class="fugou-wu-sub-title" v-if="data.cycle_price > 0">预计再获得{{ data.cycle_price }}佣金需要复购</view>
                </template>
            </view>
            <view class="fugou-wu-btn" @click="back">
                返回<text>({{ countdown }})</text>
            </view>
        </template>
    </view>
</template>

<script>
    import numberStep from "@/components/cyyUi/numberStep/index.vue";
    import shareholder from "@/api/shareholder";
    export default {
        components: {
          numberStep,
        },
        data() {
            return {
                data: null,
                num: 1,
                countdown: 5,
                total_price: 0,
                total_num: 0,
            }
        },
        onShow() {
            this.getData(() => {
                if (!this.is_fugou) {
                    this.updateCountdown();
                }
            });
        },
        computed: {
            isBuy() {
                if (!this.data) {
                    return false;
                }
                if (
                    this.total_num >= this.data.setting.fugou_where_num &&
                    this.total_price >= this.data.setting.fugou_where_price
                ) {
                    return true;
                }
                return false;
            },
            is_fugou() {
                if (!this.data) {
                    return false;
                }
                if (this.data.setting.fugou_type == 1) {
                    if (this.data.cycle_day < 0) {
                        return true;
                    }
                }
                if (this.data.setting.fugou_type == 2) {
                    if (this.data.cycle_price <= 0) {
                        return true;
                    }
                }
                if (this.data.setting.fugou_type == 3) {
                    if (this.data.cycle_price <= 0) {
                        return true;
                    }
                    if (this.data.cycle_day < 0) {
                        return true;
                    }
                }
                return false;
            }
        },
        methods: {
            async getData(callback) {
                uni.showLoading({
                	title: '加载中'
                });
                const res = await shareholder.getFugouInfo();
                uni.hideLoading();
                this.data = res.data;
                callback && callback()
            },
            updateCountdown() {
                if (this.countdown > 0) {
                    this.countdown--;
                    setTimeout(this.updateCountdown, 1000);
                } else {
                    this.$utils.goBack();
                }
            },
            back() {
                this.$utils.goBack();
            },
            onCheck(index) {
                this.data.setting.fugou_goods[index].checked = this.data.setting.fugou_goods[index].checked == 1 ? 0 : 1;
                this.sumTotalPrice();
            },
            sumTotalPrice() {
                let price = 0;
                let num = 0;
                for (let i = 0; i < this.data.setting.fugou_goods.length; i++) {
                    if (this.data.setting.fugou_goods[i].checked == 1) {
                        price += parseFloat(this.data.setting.fugou_goods[i].fugou_price * this.data.setting.fugou_goods[i].fugou_num);
                        num += this.data.setting.fugou_goods[i].fugou_num;
                    }
                }
                this.total_price = parseFloat(price.toFixed(2));
                this.total_num = num;
            },
            onNumChange(index) {
                if (this.data.setting.fugou_goods[index].checked == 0) {
                    return;
                }
                this.sumTotalPrice();
            },
            onBuy() {
                if (!this.isBuy) {
                    return;
                }
                uni.$u.debounce(async () => {
                    const list = [];
                    for (let i = 0; i < this.data.setting.fugou_goods.length; i++) {
                        if (this.data.setting.fugou_goods[i].checked == 1) {
                            list.push({
                                goods_id: this.data.setting.fugou_goods[i].id,
                                num: this.data.setting.fugou_goods[i].fugou_num,
                                price: this.data.setting.fugou_goods[i].fugou_price
                            })
                        }
                    }
                    uni.showLoading({
                    	title: '提交中'
                    });
                    const res = await shareholder.addFugouCart({
                        goods_list: JSON.stringify(list)
                    })
                    uni.hideLoading();
                    uni.navigateTo({
                        url: "/order/order-submit/order-submit?is_fugou=1&submit=" + JSON.stringify(res.data)
                    });
                }, 300)
            },
            goToLog() {
                uni.navigateTo({
                    url: '/fugou/log/log'
                })
            }
        }
    }
</script>

<style scoped>
    .wrap {
        min-height: 100vh;
        background-color: #f2f2f2;
    }
    .fugou-wrap {
        padding: 24rpx;
    }
    .fugou-top {
        padding: 38rpx;
        background: linear-gradient(to right, #F9E96D, #EECA50);
        border-radius: 20rpx;
    }
    .fugou-top-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #262626;
    }
    .fugou-top-title {
        font-size: 26rpx;
    }
    .fugou-top-title-right {
        font-size: 24rpx;
        display: flex;
        align-items: center;
    }
    .fugou-top-title-right text {
        font-size: 20rpx;
    }
    .fugou-top-price {
        font-size: 68rpx;
        margin-top: 20rpx;
    }
    .fugou-list-bg {
        margin-top: 24rpx;
        background: linear-gradient( 180deg, #FDE3E4 0%, #FFFFFF 100%);
        border-radius: 20rpx;
        padding: 0 5rpx;
    }
    .fugou-list-top {
        padding: 20rpx;
        color: #F0250E;
        display: flex;
        align-items: center;
        font-size: 24rpx;
    }
    .fugou-list-top image {
        width: 30rpx;
        height: 30rpx;
        margin-right: 10rpx;
    }
    .fugou-list-top text {
        font-weight: 500;
        margin-right: 5rpx;
    }
    .fugou-list {
        border-radius: 20rpx;
        overflow: hidden;
    }
    .fugou-item {
        padding: 24rpx 0 0 0;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .fugou-item-check {
        width: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        bottom: 12rpx;
    }
    .fugou-item-check text {
        color: #999;
        font-size: 40rpx;
    }
    .fugou-item.on .fugou-item-check text {
        color: #FF1B22;
    }
    .fugou-item-goods {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 24rpx;
        border-bottom: 2rpx solid #f8f8f8;
    }
    .fugou-item:last-child .fugou-item-goods {
        border-bottom: none;
    }
    .fugou-item-goods-img {
        width: 192rpx;
        height: 192rpx;
    }
    .fugou-item-goods-img image {
        width: 192rpx;
        height: 192rpx;
        border-radius: 10rpx;
        display: block;
    }
    .fugou-item-goods-info {
        flex: 1;
        padding: 0 20rpx;
    }
    .fugou-item-goods-title {
        font-size: 30rpx;
        color: #262626;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .fugou-item-goods-price {
        display: flex;
        align-items: center;
        margin-top: 10rpx;
    }
    .fugou-item-goods-price-1 {
        font-size: 38rpx;
        color: #F0250E;
    }
    .fugou-item-goods-price-1 text {
        font-size: 24rpx;
    }
    .fugou-item-goods-price-2 {
        color: #8C8C8C;
        font-size: 24rpx;
        margin-left: 20rpx;
        text-decoration: line-through;
    }
    .fugou-item-goods-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10rpx;
    }
    .fugou-item-goods-footer-left {
        color: #8C8C8C;
        font-size: 24rpx;
    }
    .fugou-footer-wrap {
        width: 100%;
        position: fixed;
        bottom: 0;
        z-index: 2;
    }
    .fugou-footer-z {
        background-color: #fff;
        height: constant(safe-area-inset-bottom);  
        height: env(safe-area-inset-bottom);  
    }
    .fugou-z {
        height: calc(150rpx + constant(safe-area-inset-bottom));
        height: calc(150rpx + env(safe-area-inset-bottom));
    }
    .fugou-footer {
        height: 150rpx;
        background-color: #fff;
        border-radius: 20rpx 20rpx 0 0;
        padding: 10rpx 20rpx 10rpx 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center; 
    }
    .fugou-footer-left-bottom {
        display: flex;
        align-items: center;
        color: #F0250E;
        font-size: 22rpx;
    }
    .fugou-footer-left-bottom view {
        margin-right: 20rpx;
    }
    .fugou-footer-left-bottom view:last-child {
        margin-right: 0;
    }
    .fugou-footer-left-bottom view text {
        margin-left: 20rpx;
    }
    .fugou-footer-left-price {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #262626;
    }
    .fugou-footer-left-price-1 {
        font-size: 40rpx;
        color: #F0250E;
    }
    .fugou-footer-left-price-1 text {
        font-size: 28rpx;
    }
    .fugou-submit {
        padding: 20rpx 40rpx;
        background-color: #8C8C8C;
        color: #fff;
        font-size: 28rpx;
        border-radius: 120rpx;
    }
    .fugou-submit.on {
        background-color: #F0250E;
    }
    
    .fugou-wu {
        background-color: #fff;
        padding: 30rpx 0 50rpx 0;
        text-align: center;
    }
    .fugou-wu-img text {
        font-size: 190rpx;
        color: #F0250E;
    }
    .fugou-wu-title {
        font-size: 40rpx;
        color: #262626;
    }
    .fugou-wu-sub-title {
        font-size: 30rpx;
        color: #8C8C8C;
        margin-top: 20rpx;
    }
    .fugou-wu-btn {
        width: 80%;
        margin: 80rpx auto 0;
        height: 88rpx;
        border-radius: 120rpx;
        background-color: #F0250E;
        font-size: 32rpx;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .fugou-wu-btn text {
        margin-left: 20rpx;
    }
</style>